import React from 'react'
import { DatePicker, Space, ConfigProvider } from 'antd';
import moment, { Moment } from 'moment';
import 'moment/locale/zh-cn';
import zhCN from 'antd/lib/locale/zh_CN';
moment.locale('zh-cn');


const { RangePicker } = DatePicker;

interface defaultProps {
  value: null | [string, string],
  onChange?: (payload: [string, string] | null) => void
}

export default function index(props: defaultProps) {

  const onChange = (values: any, formatString: [string, string]) => {
    console.log(values, formatString);
    let returnValue: null | [string, string] = formatString;
    if (formatString[0] === "" && formatString[1] === "") {
      returnValue = null;
    }
    if (props.onChange) {
      props.onChange(returnValue);
    }
  }

  const valueHandler = (value: null | [string, string]): any => {
    if (!value) {
      return value;
    } else {
      return value.map((item: string) => {
        return moment(item, 'YYYY-MM-DD');
      })
    }
  }

  return (
    <ConfigProvider locale={zhCN}>
      <Space direction="vertical" size={12}>
        <RangePicker onChange={onChange} value={valueHandler(props.value)} />
      </Space>
    </ConfigProvider>
  )
}
